<template>
  <div class="shop">
    <div class="shop-search">
      <div class="shop-search-name">
        <el-input v-model="searchName" placeholder="请输入饰品名称" />
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="shop-list">
      <el-table :data="shopList" style="width: 100%" @sort-change="sortChange">
        <el-table-column prop="id" label="饰品id" width="95" />
        <el-table-column prop="CommodityName" label="饰品名字" width="400" />
        <el-table-column label="饰品图片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.IconUrl"
              :preview-src-list="[scope.row.IconUrlLarge]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="Price" sortable="custom" label="价格" />
        <el-table-column prop="TypeName" label="类型" />
        <el-table-column label="外观">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Exterior" effect="dark" :color="'#'+scope.row.ExteriorColor">{{ scope.row.Exterior }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="稀有度">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Rarity" effect="dark" :color="'#'+scope.row.RarityColor">{{ scope.row.Rarity }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="品质">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Quality" effect="dark" :color="'#'+scope.row.QualityColor">{{ scope.row.Quality }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { getShopList } from "@/api/shop";
export default {
  name: "Shop",
  data() {
    return {
      // 分页
      page: 1,
      limit: 10,
      total:0,
      // 列表数据
      shopList: [],
      // 查询
      searchName: '',
    };
  },
  
  watch: {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList(sort) {
      sort = sort || {key:'',order:''}
      
      const res = await getShopList(
        this.page, 
        this.limit, 
        this.searchName, 
        sort
      );
      console.log(res);
      if (res.code==200) {
        this.shopList = res.list;
        this.total = res.total;
      }
    },
    // 查询
    search(){
      this.page = 1;
      this.getList();
    },
    // 排序
    sortChange(val) {
      console.log(val);
      this.page = 1;
      let sort = {
        key:val.prop,
        order:val.order
      }
      this.getList(sort);
    },
    // 分页
    currentChange(val) {
      this.page = val;
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.shop{
  padding: 20px;
  .el-tag{
    border: 0;
  }
  .shop-search{
    display: flex;
    .shop-search-name{
      .el-input{
        width: 200px;
      }
    }
  }
  
}
</style>
